import { StyleSheet, Text, View, ScrollView, Pressable } from 'react-native';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigation, useRoute } from '@react-navigation/native';
import FastImage from '@d11/react-native-fast-image';
import Icon from 'react-native-vector-icons/Ionicons';
import { NavBarHeader } from '~/components';
import { observer, deviceStore } from '~/store';
import { px2dp, scale } from '~/utils/px2dp';
import { setLowerEqThreshold, getLowerEqThreshold } from '~/utils/ble/application';
import { batteryArray } from '~/utils/deviceMenues';

export default observer(() => {
    const { t } = useTranslation();
    const navigation: any = useNavigation();
    const router: any = useRoute();
    const { type, device_sn, msubDevice_sn, device_code, pupillus_mobile } = router.params || {};
    const { isLowPattern } = deviceStore;
    const [isLaser, setIsLaser] = useState(false);
    const [isTiming, setIsTiming] = useState(false);
    const onPress = (type) => {
        const result = batteryArray.find((item) => item.devcie.includes(device_code));
        const timing = result?.list?.timing;
        const laser = result?.list?.laser;
        const start = type == 1 ? timing?.params_one : laser?.params_one;
        const end = type == 1 ? timing?.params_two : laser?.params_two;
        setLowerEqThreshold(start, end, router.params);
        setTimeout(() => {
            getLowerEqThreshold(router.params);
        });
    };
    function matchBatteryParams() {
        let isLaser = false;
        let isTiming = false;

        for (const item of batteryArray) {
            if (item.devcie.includes(device_code)) {
                const laser = item.list.laser;
                const timing = item.list.timing;

                if (laser.params_one === isLowPattern.modeStartNum && laser.params_two === isLowPattern.modeEndNum) {
                    isLaser = true;
                }

                if (timing.params_one === isLowPattern.modeStartNum && timing.params_two === isLowPattern.modeEndNum) {
                    isTiming = true;
                }
                break;
            }
        }
        return { isLaser, isTiming };
    }
    useEffect(() => {
        getLowerEqThreshold(router.params);
    }, []);
    useEffect(() => {
        const { isLaser, isTiming } = matchBatteryParams();
        setIsLaser(isLaser);
        setIsTiming(isTiming);
    }, [isLowPattern, device_code]);

    return (
        <View style={styles.container}>
            <NavBarHeader title={t('BlePowerMode.title')} />
            <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.contentStyle}>
                <Pressable style={styles.listItem} onPress={() => onPress(1)}>
                    <View style={[styles.row]}>
                        <FastImage
                            style={styles.icons}
                            source={{
                                uri: 'https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/20200924172343.png',
                                priority: FastImage.priority.high,
                            }}
                            resizeMode={FastImage.resizeMode.contain}
                        />
                        <View style={styles.row}>
                            {isTiming && <Icon name="checkmark-circle" size={26} color={'#009933'}></Icon>}
                            <Text>
                                {t('BlePowerMode.t9')}
                                {isTiming ? t('BlePowerMode.t2') : t('BlePowerMode.t3')}
                            </Text>
                        </View>
                    </View>
                    <View style={{ marginTop: px2dp(32) }}>
                        <Text>{t('BlePowerMode.t1')}</Text>
                        <Text style={styles.tips}>{t('BlePowerMode.t5')}</Text>
                    </View>
                </Pressable>
                <Pressable style={styles.listItem} onPress={() => onPress(2)}>
                    <View style={[styles.row]}>
                        <FastImage
                            style={styles.icons}
                            source={{
                                uri: 'https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/20200924172334.png',
                                priority: FastImage.priority.high,
                            }}
                            resizeMode={FastImage.resizeMode.contain}
                        />
                        <View style={styles.row}>
                            {isLaser && <Icon name="checkmark-circle" size={26} color={'#009933'}></Icon>}
                            <Text>
                                {t('BlePowerMode.t10')}
                                {isLaser ? t('BlePowerMode.t2') : t('BlePowerMode.t3')}
                            </Text>
                        </View>
                    </View>
                    <View style={{ marginTop: px2dp(32) }}>
                        <Text>{t('BlePowerMode.t6')}</Text>
                        <Text style={styles.tips}>{t('BlePowerMode.t7')}</Text>
                        <Text style={styles.t1}>{t('BlePowerMode.t8')}</Text>
                    </View>
                </Pressable>
            </ScrollView>
        </View>
    );
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    contentStyle: {
        flexGrow: 1,
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    listItem: {
        backgroundColor: '#fff',
        padding: px2dp(24),
        marginTop: px2dp(32),
    },
    icons: {
        width: px2dp(260),
        height: px2dp(260),
    },
    tips: {
        color: '#666',
        marginTop: px2dp(24),
        lineHeight: px2dp(36),
        fontSize: scale(26),
    },
    t1: {
        color: 'red',
        marginTop: px2dp(12),
        fontSize: scale(26),
    },
});
